import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
import HomeView from "../views/GlanceView.vue";
import AboutView from "../views/AboutView.vue";
import { id } from "element-plus/es/locales.mjs";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // ==========================================================================
    // Home
    // ==========================================================================
    // {
    //   path: '/',
    //   redirect: '/home',
    // },
    {
      path: "/home",
      name: "home",
      component: HomeView,
    },
    {
      path: "/glance",
      name: "glance",
      component: () => import("../views/GlanceView.vue"),
    },
    {
      path: "/about",
      name: "about",
      component: AboutView,
    },
    // ==========================================================================
    // Reactivity Core
    // ==========================================================================
    {
      path: "/ref",
      name: "ref",
      component: () => import("../views/reactivity/RefView.vue"),
    },
    {
      path: "/reactive",
      name: "reactive",
      component: () => import("../views/reactivity/ReactiveView.vue"),
    },
    {
      path: "/computed",
      name: "computed",
      component: () => import("../views/reactivity/ComputedView.vue"),
    },
    {
      path: "/readonly",
      name: "readonly",
      component: () => import("../views/reactivity/ReadonlyView.vue"),
    },
    {
      path: "/watch",
      name: "watch",
      component: () => import("../views/reactivity/WatchView.vue"),
    },
    {
      path: "/torefs",
      name: "torefs",
      component: () => import("../views/reactivity/ToRefsView.vue"),
    },
    {
      path: "/hooks",
      name: "hooks",
      component: () => import("../views/reactivity/HooksView.vue"),
    },
    // ==========================================================================
    // pinia
    // ==========================================================================
    {
      path: "/pinia-father",
      name: "pinia-father",
      component: () => import("../views/pinia/FatherView.vue"),
    },
    {
      path: "/pinia-child",
      name: "pinia-child",
      component: () => import("../views/pinia/ChildView.vue"),
    },

    // ==========================================================================
    // router
    // ==========================================================================
    {
      path: "/router-summary",
      name: "router-summary",
      component: () => import("../views/router/SummaryView.vue"),
      children: [
        {
          path: "detail",
          name: "router-summary-detail",
          component: () => import("../views/router/DetailView.vue"),
        },
      ],
    },
    {
      path: "/router-summaryquery",
      name: "router-summaryquery",
      component: () => import("../views/router/SummaryQueryView.vue"),
      children: [
        {
          path: "detail",
          name: "router-summaryquery-detail",
          component: () => import("../views/router/DetailView.vue"),
        },
      ],
    },
    {
      path: "/router-summaryprops",
      name: "router-summaryprops",
      component: () => import("../views/router/SummaryPropsView.vue"),
      children: [
        {
          path: "detail/:id",
          name: "router-summaryprops-detail",
          component: () => import("../views/router/DetailPropsView.vue"),
          props: true,
        },
      ],
    },
    {
      path: "/router-summaryquery2props",
      name: "router-summaryquery2props",
      component: () => import("../views/router/SummaryQueryToPropsView.vue"),
      children: [
        {
          path: "detail/:id",
          name: "router-summaryquery2props-detail",
          component: () => import("../views/router/DetailPropsView.vue"),
          // props: true,
          props(route) {
            console.log("router-summaryquery2props-detail: ", route);
            return route.query;
            // return {
            //   id: "Ui7hRGbjOdwt_DyfPJOPi"
            // }
          },
        },
      ],
    },
    {
      path: "/router-navigator",
      name: "router-navigator",
      component: () => import("../views/router/NavigatorView.vue"),
    },
    // ==========================================================================
    // slots
    // ==========================================================================
    {
      path: "/slots-summary",
      name: "slots-summary",
      component: () => import("../views/slots/SummaryView.vue"),
    },
    {
      path: "/slots-named",
      name: "slots-named",
      component: () => import("../views/slots/ParentView.vue"),
    },
    {
      path: "/slots-scoped",
      name: "slots-scoped",
      component: () => import("../views/slots/ParentScopedSlotView.vue"),
    },
    // ==========================================================================
    // 传值 - 通过props传值
    // ==========================================================================
    {
      path: "/pass-value-props-parents",
      name: "pass-value-props-parents",
      component: () => import("../views/passvalue/props/ParentsView.vue"),
    },

    // 传值 - 通过自定义事件传值
    {
      path: "/pass-value-customevent-parents",
      name: "pass-value-customevent-parents",
      component: () =>
        import("../views/passvalue/custom-event/ParentsView.vue"),
    },
    // 传值 - 通过mitt传值
    {
      path: "/pass-value-mitt-parents",
      name: "pass-value-mitt-parents",
      component: () => import("../views/passvalue/mitt/ParentsView.vue"),
    },

    // ==========================================================================
    // other - SuspenseView
    // ==========================================================================
    {
      path: "/other-suspense",
      name: "other-suspense",
      component: () => import("../views/other/SuspenseView.vue"),
    },
  ],
});

export default router;
